<script setup>
import { usePaintingStore } from "@/store";
import { imgUploadVerify } from "@/utils/auth";
import { getBackgroundImgTemplates } from "@/api/painting";
import { onLoad } from "@dcloudio/uni-app";
import { ref, onMounted } from 'vue'
import selectHistory from "@/components/selectHistory/index.vue";


defineProps({
  tabsList: Array
})


const paintingStore = usePaintingStore();
const generationBgc = paintingStore.generationBgc;

const item = ref({})
const isShowHistory = ref(false); // 文案记录下拉框显示

const active = ref(0)


// 文本域输入值
const inputChange = (e) => {
  generationBgc.prompt = e.detail.value;
};

// 当前选中风格
const activeFn = (imgUrl) => {
  generationBgc.refImageUrl = imgUrl
}


onLoad((e) => {
  e.item && (item.value = JSON.parse(e.item))
});
</script>

<template>
  <!-- 背景表述词 -->
  <div class="itemBox">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">背景描述词<span>(选填)</span>
        </p>
      </div>
      <div class="rightBox">
        <div class="right" @click="isShowHistory = true">
          <i class="iconfont ai-icon-lishi"></i>
          <p class="closeText">文案记录</p>
        </div>
        <div class="right" @click="generationBgc.prompt = ''">
          <i class="iconfont ai-icon-qingchuwenben"></i>
          <p class="closeText">清除文本</p>
        </div>
      </div>
    </div>
    <div style="position: relative">
      <textarea :value="generationBgc.prompt" class="textarea" placeholder="客厅有灰色沙发、现代灯具和抽象画作，餐桌上摆放白色餐具和玻璃杯"
        placeholder-class="taPlaceHolder" @input="inputChange"></textarea>

      <div class="selectHistory">
        <selectHistory v-model:show="isShowHistory" :id="item?.id"></selectHistory>
      </div>
    </div>
  </div>

  <!-- 风格列表 -->

  <van-tabs v-model:active='active' animated :ellipsis="false">
    <van-tab v-for="(item, index) of tabsList" :title="index">
      <div class="style-box" :class="{ gird: item.length > 8, noTowRows: item.length <= 4 }">
        <div class="style-box-item" v-for="i of item" :class="{ active: generationBgc.refImageUrl === i.imgUrl }"
          @click="activeFn(i.imgUrl)">
          <img class="style-img" :src="i.imgUrl" mode="aspectFill" />
          <p class="style-text">{{ i.name }}</p>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<style lang="less" scoped>
.itemBox {
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 0 22rpx;

    .leftBox {
      display: flex;
      align-items: center;

      .leftIcon {
        width: 12rpx;
        height: 18rpx;
        background: var(--a-main-color);
        border-radius: 6rpx;
        margin-right: 10rpx;
      }

      .title {
        font-size: 28rpx;
        color: var(--a-one-text-color);

        label {
          font-weight: 400;
          font-size: 24rpx;
        }
      }
    }

    .rightBox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 350rpx;

      .right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: var(--a-three-text-color);

        .iconfont {
          margin-right: 6rpx;
        }

        &:first-child {
          margin-right: 20rpx;
        }
      }
    }
  }
}

.textarea {
  box-sizing: border-box;
  width: 100%;
  height: 166rpx;
  display: block;
  margin: 0 auto;
  padding: 24rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 20rpx;
  font-size: 28rpx;
  color: var(--a-one-text-color);

  /deep/.taPlaceHolder {
    color: var(--a-three-text-color);
  }
}

.selectHistory {
  position: absolute;
  top: 180rpx;
  left: 0;
}



.style-box {
  display: grid;
  grid-template-rows: repeat(2, 220rpx);
  grid-template-columns: repeat(auto-fill, 160rpx);
  grid-column-gap: 17rpx;
  grid-row-gap: 17rpx;
  overflow-x: auto;
  margin-top: 16rpx;


  &::-webkit-scrollbar {
    display: none;
  }

  .style-box-item {
    width: 170rpx;
    height: 214rpx;

    .style-img {
      display: block;
      border: 4rpx solid transparent;

      width: 154rpx;
      height: 154rpx;
      object-fit: contain;
      margin-bottom: 12rpx;
      border-radius: 30rpx;
    }

    .style-text {
      font-size: 24rpx;
      text-align: center;
      color: var(--a-one-text-color);
    }
  }

  .active {
    .style-img {
      border: 4rpx solid var(--a-main-color);
    }

    .style-text {
      color: var(--a-main-color);
    }
  }
}

.gird {
  grid-auto-flow: column;
}

.noTowRows {
  grid-template-rows: repeat(1, 215rpx);
}
</style>